<script setup>
import { defineProps, computed, toRef } from 'vue';

// 定义组件的props，接收一个名为messages的数组，作为必需的属性
const props = defineProps({
  messages: {
    type: Array,
    required: true
  }
});

// 使用toRef将props中的messages属性转换为一个响应式引用
const messagesRef = toRef(props, 'messages');

// 使用computed计算属性来处理messagesRef中的每个消息
const splitMessages = computed(() => {
  return messagesRef.value.map((x) => {
    // 定义一个正则表达式，用于匹配支付意图ID（以pi_开头的字符串）
    const paymentIntentRe = /(pi_(\S*)\b)/
    // 使用正则表达式在消息中查找支付意图ID
    const paymentIntentMatch = x.match(paymentIntentRe)
    return {
      // 如果匹配成功，将支付意图ID添加到返回对象中
      ...(paymentIntentMatch && {paymentIntent: paymentIntentMatch[0]}),
      // 将消息内容中去除支付意图ID后的部分作为content返回
      content: x.replace(paymentIntentRe, '') || x
    }
  });
})

// 定义一个函数，用于生成指向Stripe仪表板的链接
const addDashboardLinks = (paymentIntent) => {
  return `https://dashboard.stripe.com/test/payments/${paymentIntent}`;
};

</script>
<template>
  <div
      id="messages"
      role="alert"
  >
    <!-- 遍历splitMessages中的每个消息对象 -->
    <span
        v-for="message in splitMessages"
        :key="message"
    >
      <!-- 显示消息的内容 -->
      {{ message.content }}
      <!-- 如果消息中包含支付意图ID，则生成一个链接 -->
      <a
        v-if="message.paymentIntent"
        :href="addDashboardLinks(message.paymentIntent)"
      >{{ message.paymentIntent }}</a>
      <br>
    </span>
  </div>
</template>
